<template>
  <div class="header">
    <span class="current-time">{{ currentTime }}</span>
    <span class="title">资金交收风险揭示</span>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      currentTime: ''
    };
  },
  mounted() {
    this.updateTime();
    this.timer = setInterval(this.updateTime, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    updateTime() {
      const currentDate = new Date();
      const formattedDate = this.formatDate(currentDate);
      const formattedTime = this.formatTime(currentDate);
      this.currentTime = `${formattedDate} ${formattedTime}`;
    },
    formatDate(date) {
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month < 10 ? '0' + month : month;
      day = day < 10 ? '0' + day : day;
      return `${month}-${day}-${year}`;
    },
    formatTime(date) {
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      hours = hours < 10 ? '0' + hours : hours;
      minutes = minutes < 10 ? '0' + minutes : minutes;
      seconds = seconds < 10 ? '0' + seconds : seconds;
      return `${hours}:${minutes}:${seconds}`;
    }
  }
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  color: white;
  margin-bottom: 20px;
  position: relative;
}

.current-time {
  position: absolute;
  left: 0;
}

.title {
  margin: 0 auto;
}
</style>
